<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>

		<canvas id="Mycanvas" width="800" height="500"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("Mycanvas");
			var ctx = canvas.getContext("2d");
			var arcx = 50;
			var arcy = 50;
			var arc_vx = 0.5;
			var arc_vy = 0;

			setInterval(function() {
				ctx.fillStyle = "rgba(200,220,0,0.2)";
				ctx.fillRect(0, 0, 800, 500);

				ctx.beginPath();
				ctx.fillStyle = "red";
				ctx.arc(arcx, arcy, 50, 0, 2 * Math.PI);
				ctx.fill();
				arc_vy = arc_vy + 1.6;
				arcy = arcy + arc_vy;

				arc_vx = arc_vx + 0.06;
				arcx = arcx + arc_vx;
				if(arcy > 500 - 30) {
					arc_vy = -arc_vy;
				}

				if(arcx > 800 - 30) {
					arc_vx = -arc_vx;
				}

			}, 20);
		</script>

	</body>

</html>